<template>
  <div class="login-container">
    <div class="login-layout">
      <el-card class="login-card-left" hadow="always">
        <div class="login-layout-left">
          <h3>Welcome</h3>
          <h3>图书馆管理系统</h3>
        </div>
      </el-card>
      <el-card class="login-card-right" hadow="always">
        <div class="login-layout-right">
          <el-form
              style="width: 400px;"
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="120px"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
          >
            <div class="login-layout-right-top">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="studyUrl"
                  fit="contain">
              </el-image>
              <h3>欢迎登录</h3>
            </div>
            <!-- 用户名 -->
            <el-form-item label="用户名：" prop="username">
              <el-input
                  maxlength="20"
                  show-word-limit
                  clearable
                  :prefix-icon="User"
                  placeholder="请输入用户名"
                  v-model="ruleForm.username"
              />
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="密码：" prop="password">
              <el-input
                  maxlength="100"
                  clearable
                  type="password"
                  show-password
                  :prefix-icon="Lock"
                  placeholder="请输入密码"
                  v-model="ruleForm.password"
              />
            </el-form-item>
            <!-- 身份 -->
            <el-form-item label="身份：" prop="standing">
              <el-radio-group v-model="ruleForm.standing">
                <el-radio label="1">管理员</el-radio>
                <el-radio label="2">学生</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <el-button :loading="loading" type="primary" @click="submitForm(ruleFormRef)">
                登录
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">
                重置
              </el-button>
            </el-form-item>
            <!-- 验证码 -->
            <Vcode :show="isShow"
                   @success="success"
                   @close="close"
                   @fail='fail'>
            </Vcode>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {Lock, User} from "@element-plus/icons-vue";
import Vcode from "vue3-puzzle-vcode";
import studyUrl from '@/assets/images/login/study.png'
import router from "@/router";
import useUserStore from "@/store/modules/user/user.ts";
import {getTime} from "@/utils/time.ts";
import useMenuRouter from "@/store/modules/router/menu-router.ts";
import {asyncRoute, constantRoute} from "@/router/routes.ts";
import {setMenuList} from "@/utils/token.ts";

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const loading = ref(false)
const userStore = useUserStore();
const menuRouter = useMenuRouter();

interface RuleForm {
  username: string
  password: string
  standing: string
}

// 表单数据
const ruleForm = reactive<RuleForm>({
  username: '',
  password: '',
  standing: '1',
})
// 校验规则
const rules = reactive<FormRules<RuleForm>>({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
})
// 表单提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (!valid) {
      console.log('校验失败!', fields)
      return
    }
    submit()
  })
}
// 表单重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

//图片滑块验证码
const isShow = ref(false)
const submit = () => {
  isShow.value = true;
}
// 用户通过了验证
const success = () => {
  isShow.value = false;
  loginSystem()
}
// 用户点击遮罩层，应该关闭模态框
const close = () => {
  isShow.value = false;
}
// 用户验证失败
const fail = () => {
  console.log('验证失败');
}

// 登录系统
const loginSystem = () => {
  // 判断身份是管理员还是学生
  if (ruleForm.standing == '1') {
    loading.value = true;
    // 调用管理员后端登录接口
    userStore.adminLogin({
      username: ruleForm.username,
      password: ruleForm.password
    }).then(() => {
      // 登录成功
      menuRouter.menuList = constantRoute
      setMenuList(constantRoute)
      // 跳转到管理员页面
      router.push('/')
      ElNotification({
        type: 'success',
        message: '欢迎回来',
        title: `HI，${getTime()}好`
      });
    })
  } else {
    // 学生
    loading.value = true;
    // 跳转到学生页面
    userStore.studentLogin({
      username: ruleForm.username,
      password: ruleForm.password
    }).then(() => {
      // 登录成功
      menuRouter.menuList = asyncRoute
      setMenuList(asyncRoute)
      // 跳转到学生页面
      router.push('/')
      ElNotification({
        type: 'success',
        message: '欢迎回来',
        title: `HI，${getTime()}好`
      });
    });
  }
  loading.value = false;
}
</script>


<style lang="scss">
// 背景图片地址
$bg-image: url('@/assets/images/login/login_background.png');
$white-opacity: rgb(255 255 255 / 50%);

.login-container {

  // 弹性盒布局
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;

  // 背景图片
  background: $bg-image no-repeat center center fixed;

  // 背景图片铺满
  background-size: cover;

  // 透明化
  opacity: 0.8;

  .login-layout {
    display: flex;

    .login-card-left {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $white-opacity;

      .login-layout-left {
        display: flex;
        flex-direction: column;
        align-items: center;

        h3 {
          // 字体设置
          font: italic bold 50px 'Brush Script MT', '华文楷体', sans-serif;
          text-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
        }
      }
    }

    .login-card-right {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgb(255 255 255 / 96%);

      .login-layout-right {
        .login-layout-right-top {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;

          h3 {
            font: italic bold 30px 'Brush Script MT', '华文楷体', sans-serif;
            color: darkblue;
          }
        }
      }
    }
  }
}

</style>
